<template>
  <div>文件夹位置</div>
  <input type="file" multiple @change="fileChange" />
  <li v-for="(item, index) in list" :key="index">
    <img :src="item.url" alt="" />
  </li>
  <img :src="useResult" alt="" />
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const list = ref([]);
import { getBucket, getPictureList,putPicture } from '../../api/picture';

getBucket().then((res) => {
  console.log('res---->', res);
});
getPictureList().then((res) => {
  console.log('res---->', res);
  list.value = res;
});
const useResult = ref();
const fileChange = (event) => {
  console.log('event---->', event.target.files);
  let file = event.target.files[0];
  console.log('file---->',file);
  const formData  = new FormData()
  formData.append('file',file)
  // const filePath = URL.createObjectURL(file);
  // console.log('filePath---->', filePath);

  // let reader = new FileReader();
  // reader.readAsDataURL(file);
  // reader.onload = function (result) {
  //   useResult.value = result.target.result; // 图片地址 Base64 格式的 可预览
  //   console.log('useResult---->',useResult.value);
  // };
       putPicture({file:formData,name:'2222'}).then(res=>{
    console.log('res--222-->',res);
  })
};
const handleFileSelect = (event) => {
  console.log('event---->', event);
 
};
</script>
